<script setup>
/**
 * @import libs
 */
import { storeToRefs } from 'pinia'

/**
 * @import components
 */
import chatListItem from '@/components/petDoctorComp/chatComp/chatListItem.vue'

/**
 * @import pinia stores
 */

//pinia -> usePetDoctorStaticMessStore
import { usePetDoctorStaticMessStore } from '@/stores/petDoctor/petDoctorStaticMess'

/**
 * @param petDoctorChatAvataAndName 聊天头像和对方昵称
 * @param petDoctorChatList 聊天内容列表
 */
let { petDoctorChatAvataAndName, petDoctorChatList } = storeToRefs(usePetDoctorStaticMessStore())

/**
 * @param roleOpponent 对方角色标记
 */
let { roleOpponent } = usePetDoctorStaticMessStore()

// pinia -> usePetDoctorPageStore
import { usePetDoctorPageStore } from '@/stores/petDoctor/petDoctorPage.js'

/**
 * @param chatScrollTopHeight 聊天滚动条高度
 */
let { chatScrollTopHeight } = storeToRefs(usePetDoctorPageStore())

</script>

<template>
    <div class="chatList-class">
        <scroll-view scroll-y :scroll-top="chatScrollTopHeight" scroll-with-animation="true" class="chatList-scroll-view">
            <chatListItem v-for="item in petDoctorChatList" :key="item.id" :item="item"
                :avatar="item.role == roleOpponent ? petDoctorChatAvataAndName.OpponentAvatar : petDoctorChatAvataAndName.MyAvatar">
            </chatListItem>
        </scroll-view>
    </div>
</template>

<style scoped>

.chatList-class {
    margin-top: 5vh;
}

.chatList-scroll-view {
    height: 68vh;
}
</style>